<template>
  <van-field :label="label" :required="required" :rules="rules">
    <template #input>
      <van-rate
        :value="value"
        :count="count"
        :size="size"
        :gutter="gutter"
        :color="color"
        :void-color="voidColor"
        :disabled-color="disabledColor"
        :allow-half="allowHalf"
        :required="required"
        :disabled="disabled"
        @input="onChange"
      />
    </template>
  </van-field>
</template>

<script>
export default {
  name: 'fieldRate',
  props: {
    label: {
      type: String
    },
    value: {
      type: Number
    },
    count: {
      type: Number,
      default: 5
    },
    gutter: {
      type: String,
      default: '4px'
    },
    size: {
      type: String,
      default: '20px'
    },
    color: {
      type: String,
      default: '#FFD21E'
    },
    voidColor: {
      type: String,
      default: '#c8c9cc'
    },
    disabledColor: {
      type: String,
      default: '#c8c9cc'
    },
    allowHalf: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dirty: false
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val);
      this.$emit('change', val);
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    }
  }
}
</script>

<style>
</style>
